<template>
  <div class="map-container" ref="mapContainer"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 地图容器引用
const mapContainer = ref(null);
// 地图实例
let map = null;

onMounted(() => {
  // 确保百度地图API已加载完成
  if (window.BMapGL) {
    initMap();
  } else {
    // 如果API未加载，等待加载完成后初始化
    window.addEventListener("BMapGL_loadScript", initMap);
  }
});

// 初始化地图
const initMap = () => {
  if (mapContainer.value && !map) {
    // 创建地图实例
    map = new window.BMapGL.Map(mapContainer.value);
    // 创建点坐标 (北京中心点坐标)
    const point = new window.BMapGL.Point(116.404, 39.915);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    // 允许鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
  }
};
</script>

<style scoped>
.map-container {
  width: 70%;
  height: 1000px;
  margin: 0;
  padding: 0;
}
</style>
